import { getBanner } from './request.js';

(async function () {
    let banner = await getBanner()
    let bannerArr = banner.data.Carousels;
    Readering(bannerArr);
    carousel();
    setForm();
})()

// 渲染
function Readering(arr) {
    let wrapper = document.querySelector("main .banner .swiper-container .swiper-wrapper");
    let str = "";
    arr.forEach(item => {
        str += `
        <div class="swiper-slide"><img src="${item.url}" /></div>`;
    });
    wrapper.innerHTML = str;
}
// 轮播图功能
function carousel() {
    let certifySwiper = new Swiper('.wrap main .bannerBox .banner .swiper-container', {
        speed: 500,
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        autoplay: {
            autoplay: true,
            delay: 3000,
            pauseOnMouseEnter: true,
        },
        preventClicksPropagation: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        simulateTouch: false,
        on: {
            progress: function (progress) {
                for (let i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    var modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    var translate = slideProgress * modify * 70 + 'px';
                    var scale = 1 - Math.abs(slideProgress) / 5;
                    var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) >= 3) {
                        slide.css('opacity', 0);
                    }
                    if (Math.abs(slideProgress) == 0) {
                        slide.css('padding', (17 + 'px'))
                    } else {
                        slide.css('padding', (0 + 'px'))
                    }
                }
            },
            setTransition: function (swiper, transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        }

    })
    certifySwiper.el.onmouseover = function () {
        certifySwiper.autoplay.stop();
    }
    certifySwiper.el.onmouseout = function () {
        certifySwiper.autoplay.start();
    }
}
// form表单
function setForm() {
    let iptAll = document.querySelectorAll("main .settleBox .container .info_form input");
    let submit = document.querySelector("main .settleBox .container .submit");
    let getCode = document.querySelector("main .settleBox .container .info_form .ipt_code button");
    // 这个开关用来判断什么时候显示蓝色边框
    let flag = true;
    getCode.addEventListener("click", function (e) {
        e.preventDefault()
    })
    iptAll.forEach(function (item) {
        item.addEventListener("focus", function (e) {
            if (flag) {
                e.target.style.borderColor = "skyblue";
            }
        })
        item.addEventListener("blur", function (e) {
            e.target.style.borderColor = "#dcdfe6";
            e.target.previousElementSibling.style.display = "none";
            flag = true;
            if (e.target.value === "") {
                e.target.style.borderColor = "#f56c6c";
                e.target.previousElementSibling.style.display = "block";
                flag = false;
            }
        })
    })
    submit.addEventListener("click", function () {
        iptAll.forEach(function (item) {
            if (item.value === "") {
                item.style.borderColor = "#f56c6c";
                item.previousElementSibling.style.display = "block";
                flag = false;
            }
        })
    })
}